<template>
    <view class="page d-flex f-column j-end a-center" :style="{backgroundImage: 'url(' + $imgUrls(pageData.actInfo.bj_img) + ')', 
        backgroundColor: pageData.actInfo.bj_color, '--color': pageData.actInfo.theme_color}" v-if="pageData">
        <view class="back bgwhite bor_radius flexac" :style="{top: menuButtonTop + 'px'}">
            <text class="iconfont icon-shouyeT211 black bold" v-if="fromShare == 1" @click="backHome()"></text>
            <text class="iconfont icon-xiangzuo black" v-else @click="back()"></text>
        </view>
        <view class="card bgwhite bor_radius_10 text-center">
            <div class="size32 themeColor t-letter2 m-bot40">{{ pageData.actInfo.title }}</div>
            <view class="inputBox bgf7f7 bor_radius_4 m-bot40 d-flex a-center" @click="toUrl('/otherPage/custom/selectStore')">
                <view class="flex-1 text-left bor">
                    <view class="size26 ellipsis">{{ pageData.storeInfo.name }}</view>
                    <view class="h7 color_66">距您{{ pageData.storeInfo.distance }}km</view>
                </view>
                <view class="size26 themeColor p-left24">更换</view>
            </view>
            <image :src="$imgUrls(pageData.storeInfo.codeImg)" mode="widthFix" show-menu-by-longpress class="code m-bot40"></image>
            <view class="size26 themeColor">长按二维码识别</view>
        </view>
    </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            id: '', // 活动id
            store_id: '',
            fromShare: 0,
            pageData: '',
            menuButtonTop: getApp().globalData.menuButtonObject.top
        }
    },
    computed: {
        ...mapState(['vid', 'position'])
    },
    async onLoad(e) {
        if(e.id) this.id = e.id
        if(e.shop_id) this.store_id = e.shop_id
        if(e.fromShare) this.fromShare = e.fromShare
        if(this.position.longitude == 0) await this.$pop.getLocation()
        this.getCode()
    },
    methods: {
        getCode(){
            this.$http.post({
                url: '/automaticTask/getAddGroupCodeTaskApi',
                data: {
                    id: this.id,
                    store_id: this.store_id
                }
            }).then(res=>{
                if(res.code != 200) return this.$Toast(res.msg)
                this.pageData = res.data
            })
        }
    },
    onShareAppMessage() {
        return {
            title: this.pageData.actInfo.title,
            path: `/pages/index/index?share_v_id=${this.vid}&pageType=26&id=${this.id}`,
            imageUrl: this.$imgUrls(this.pageData.actInfo.img)
        }
    }
}
</script>

<style lang="scss" scoped>
.page {
    background-repeat: no-repeat;
    background-size: 100% auto;
    padding-bottom: calc(80rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(80rpx + env(safe-area-inset-bottom));
}
.back {
    width: 60rpx;
    height: 60rpx;
    opacity: 0.6;
    position: fixed;
    left: 24rpx;
    z-index: 10;
}
.card {
    width: 650rpx;
    padding: 80rpx 60rpx;
    box-shadow: 0 4rpx 24rpx 0 rgba(0,0,0,.1);
    .inputBox {
        padding: 12rpx 24rpx;
        .bor {
            border-right: 1rpx solid #dadada;
        }
    }
    .code {
        width: 300rpx;
    }
}
.themeColor {
    color: var(--color);
}
</style>